<template>
  <page-wrap back title="面试信息" hide-tab stayStill :bg-color="uNavColor" :hideSafeArea="true">
    <InterViewNavbg/>
    <view class="header">
      <view class="item-row">
        <text class="itemTitle">面试标题</text>
        <view class="imgBtn" v-if="interviewData.interviewStatus == 'started'">
          <image class="header-btn-img" :src="aiShareImg"></image>
          <text class="red" @tap="clickShare">邀请面试</text>
        </view>
        
      </view>
      <view class="itemValue">{{ info.interviewTitle }}</view>
      <view class="itemTitle">面试号</view>
      <view class="itemValue">{{ info.interviewNumber }}</view>
      <view class="itemTitle">面试职业</view>
      <view class="itemValue">{{ info.ylPositionName }}</view>
      <view class="itemTitle">所属行业</view>
      <view class="itemValue">{{ info.firstPositionName }} - {{ info.secondPositionName }}</view>
      <view class="itemTitle">面试时间</view>
      <view class="itemValue" v-if="info.validStartTime && info.validEndTime"
        >{{getMdate(info.validStartTime) }} - {{getMdate(info.validEndTime)}}</view>
    </view>

    <view class="allContaienr">
    <view class="itemContent">
      <text class="itemName">面试题目</text>
      <text class="itemTime">共<text class="red">{{ info.questionNumTotal }}</text>个面试问题</text>
      <text class="itemResultNum">{{ info.questionUseNumTotal }}人已使用</text>
    </view>
      <view class="imgBtn">
        <image class="header-btn-img" :src="aiCheckImg"></image>
      <view class="itemRightBtn" @click.stop="getQuestions">查看详情</view>
      </view>
      
    </view>

    <view class="tool">
      <u-button
        class="tool-more"
        type="warning"
        :plain="true"
        @click="show = true"
        >更多</u-button
      >
      <u-button class="tool-check" type="warning" @click="handleCheck"
        >查看面试结果</u-button
      >
    </view>

    <u-action-sheet
      :list="options"
      v-model="show"
      :cancel-btn="true"
      :safe-area-inset-bottom="true"
      @click="clickMore"
    ></u-action-sheet>
    <u-modal
      v-model="modalShow"
      :content="tipContent"
      :show-cancel-button="true"
      @confirm="delDate"
    ></u-modal>

    <u-popup
      v-model="questionsShow"
      mode="bottom"
      height="70%"
      border-radius="14"
      closeable="true"
    >
      <view class="list-content">
        <view class="content-top-box">
          <span class="content-title">面试题目</span>
           
        </view>
        
        <scroll-view scroll-y="true" style="height: auto; background-color: #F7F8FA;">
          <view class="content-cell" v-for="(item, index) in questions" :key="index">
            <view class="content-text">{{ index+1}} 、{{ item.questionTitle }}</view>
            <u-line color="rgb(240, 239, 239)" />
            <view class="content-btn" @click.stop="showAnswer(item)">查看答案</view>
          </view>
        </scroll-view>
      </view>
    </u-popup>

    <u-popup v-model="answerShow" 
      closeable="true" mode="bottom" height="60%" border-radius="14">
      <view class="answer-content">
        <view class="font-bold">题目</view>
        <view class="answer-text"
          >{{ answer.questionTitle }}</view
        >
        <view class="font-bold">参考答案</view>
        <view class="answer-text" style="padding-bottom: 24px;"
          >{{ answer.questionStandardAnswer }}</view
        >
      </view>
    </u-popup>
    <InterviewShareView :show.sync="shareShow" :itemObj="info" @close="shareClose"/>
  </page-wrap>
</template>

<script>
import common from '@/api/common.js';
import {
  getCompanyInterviewInfo,
  getCompanyInterviewDel,
  getCompanyInterviewIssues,
} from "@/api/modules/company";
import { formatTime } from "@/utils/handle";
import share from "@/mixins/share";
import InterviewShareView from "./components/InterviewShareView.vue";
import InterViewNavbg from "./components/InterViewNavbg.vue";
export default {
  mixins: [share],
  components: {
    InterviewShareView,
    InterViewNavbg
  },
  data() {
    return {
      aiShareImg: this.$imgBaseSelf + "interview/aiShare.png",
      aiCheckImg: this.$imgBaseSelf + "interview/aiCheck.png",
      personId: uni.getStorageSync("person-id").slice(2) || undefined,
      companyId: uni.getStorageSync("company-id"),
      // personId: "21907407",
      // companyId: "123",
      interviewData:{},

      info: {
        firstPositionId: null,
        firstPositionName: "第一行业",
        id: "1665531282287673345",
        interviewNumber: "1665531281964711938",
        interviewTitle: "测试招聘6",
        questionNumTotal: 3,
        questionUseNumTotal: 15,
        secondPositionId: null,
        secondPositionName: "第二行业",
        validEndTime: 1687665600000,
        validStartTime: 1685923200000,
        ylPositionId: "1",
        ylPositionName: "大工程师",
      },
      formatTime,
      shareShow:false,
      show: false,
      modalShow: false,
      questionsShow: false,
      questions: [
        {
          questionId: "21",
          questionNum: 1,
          questionStandardAnswer: "我是谁谁谁",
          questionTitle: "你是谁",
          questionTtsUrl:
            "https://guangzhou-01-1257579186.cos.ap-guangzhou.myqcloud.com/video-mp3/1665528424934928386.mp3",
        },
      ],
      answerShow: false,
      answer: {
        questionId: "21",
        questionNum: 1,
        questionStandardAnswer: "我是谁谁谁",
        questionTitle: "你是谁",
        questionTtsUrl:
          "https://guangzhou-01-1257579186.cos.ap-guangzhou.myqcloud.com/video-mp3/1665528424934928386.mp3",
      },
      options: [
        // {
        //   text: "复制页面并编辑",
        // },
        {
          text: "删除面试",
        },
      ],
      tipContent:
        "删除当前面试后，会同步删除所有面试数据，且面试者无法再进行面试，是否继续？",
    };
  },

  onLoad(options) {
    if (options && options.data) {
      const data = JSON.parse(options.data)
      console.log("🚀 ~ file: interviewDetail.vue:180 ~ 面试详情-onLoad接收数据 ~ resultData:", data);
      this.interviewData = data;
    }
    this.getData();
  },

  created() {},

  methods: {
    getMdate(date) {
      return common.getMinuteTime(date) 
    },
    clickShare() {
      this.shareShow = true;
    },
    shareClose() {
      this.shareShow = false;
    },
    handleCheck() {
      this.info.resultNum = this.interviewData.resultNum;
      let data = JSON.stringify(this.info);
      uni.navigateTo({
        url:"/pagesSub/companyCenter/interviewAI/interviewScore?data=" + data,
      });
    },
    clickMore(index) {
      // if (index == 0) {
      //   console.log("------复制页面并编辑");
      //   uni.navigateTo({
      //     url:"/pagesSub/companyCenter/interviewAI/interviewCreate?copyData=" + JSON.stringify(this.info)
      //   });
      // } else {
      //   this.modalShow = true;
      // }

      this.modalShow = true;
    },

    getData() {
      let param = {
        id: this.interviewData.id,
      };
      getCompanyInterviewInfo(param).then((res) => {
        if (res && res.code == 200) {
          this.info = res.data;
          // let value = formatTime(this.info.validStartTime, 'yyyy-MM-dd HH:mm') + '-' + formatTime(this.info.validEndTime, 'yyyy-MM-dd HH:mm')
          // console.log("🚀 ~ file: interviewDetail.vue:180 ~ getCompanyInterviewInfo ~ value:", value)
          // this.info.date = value;
        } else {
          uni.showToast({
            title: res.status_desc,
            icon: "none",
          });
        }
      });
    },
    delDate() {
      let param = {
        companyInterviewInfoId: this.interviewData.id,
        userId: this.personId,
      };
      getCompanyInterviewDel(param).then((res) => {
        if (res && res.code == 200) {
          uni.navigateBack();
        } else {
          uni.showToast({
            title: res.status_desc,
            icon: "none",
          });
        }
      });
    },
    getQuestions() {
      let param = {
        interviewNumber: this.interviewData.interviewNumber,
        hasAnswer:"true"
      };
      getCompanyInterviewIssues(param).then((res) => {
        if (res && res.code == 200) {
          this.questions = res.data;
          this.questionsShow = true;
        } else {
          uni.showToast({
            title: res.status_desc,
            icon: "none",
          });
        }
      });
    },
    showAnswer(item) {
      this.answer = item;
      this.answerShow = true;
    },
  },
};
</script>

<style lang="scss" scoped>

.header {
  margin: 32rpx 32rpx 0rpx;
  padding: 32rpx;
  background: white;
  border-radius: 32rpx;

  .item-row {
    display: flex;
    justify-content: space-between;
  }

  .itemTitle {
    font-size: 32rpx;
    font-weight: 800;
    color: #222222;
  }
}

.red {
  color: #F75A3E;
  margin: 0 10rpx;
  font-size: 30rpx;
}

.itemValue {
    font-size: 30rpx;
    color: #555555;
    margin: 16rpx 0 36rpx;
  }

.tool {
  display: flex;
  width: 100%;
  height: 100rpx;
  margin: 20rpx 30rpx;
  position: absolute;
  bottom: 30rpx;
  .tool-more {
    width: 30%;
    margin-right: 20rpx;
  }
  .tool-check {
    width: 60%;
  }
}

.list-content {
  background-color: #F7F8FA;
  height: 100%;


  .content-top-box{
     display: flex;
     flex-direction: row;

  }

  .content-title {
    width: 200rpx;
    height: 120rpx;
    font-weight: bold;
    text-align: center;
    padding-top: 50rpx;
    font-size: 36rpx;   
    margin-left: calc(50vw - 100rpx);
  }
  .content-cell {
    background-color: white;
    margin: 10rpx 30rpx;
    padding: 20rpx;
    border-radius: 20rpx;
  }
  .content-text {
    margin-bottom: 30rpx; 
    font-size: 32rpx; 
    font-weight: 800;
  }
  .content-btn {
    text-align: center;
    margin: 20rpx 0rpx;
    color: #F75A3E;
  }
}

.imgBtn {
  display: flex;
  align-items: center;
  .header-btn-img {
    width: 32rpx;
    height: 32rpx;
    margin: 2rpx;
  }
}


.answer-content {
  margin: 64rpx 32rpx;

  .font-bold {
    font-weight: bold;
    font-size: 36rpx;
    margin-top: 64rpx;
    margin-bottom: 24rpx;
    color: #222222;
  }

  .answer-text {
    color: #222222;
    font-size: 30rpx;
  }
}

.allContaienr {
  display: flex;
  background: white;
  border-radius: 32rpx;
  justify-content: space-between;
  flex-direction: row;
  padding: 32rpx;
  margin: 32rpx;

  .itemContent {
    display: flex;
    flex-direction: column;

    .itemName {
      color: #222222;
      font-size: 32rpx;
      font-weight: 800;
    }
    .itemResultNum {
      margin-top: 18rpx;
      font-size: 26rpx;
      color: #888888;
    }

    .itemTime {
      margin-top: 16rpx;
      font-size: 26rpx;
      color: #888888;
    }
  }
  
  .itemRightBtn {
    display: flex;
    align-items: center;
    color: #F75A3E;
  }
}
</style>
